import React from 'react';
import { sleep } from 'antd-mobile/es/utils/sleep';
import styles from '@/assets/css/coupon.module.css';
import type business from '@/typeof/type';
// 导入TabBar组件
import TabBar from '@/components/TabBar';

const Index = () => {

    const [ active, SetActive ] = React.useState('all');
    const [ page, SetPage ] = React.useState(1)
    const [ CouponList, SetCouponList ] = React.useState<any>([]);
    const [ hasMore, SethasMore ] = React.useState(false);
    const [ business ] = useState<business>(React.business);

    useEffect(() => {
        GetCouponData();
    },[]);

    const OnRefresh = async () => {
        SetPage(1);
        SetCouponList([]);
        SethasMore(true);

        await sleep(1000);
        await GetCouponData();
    };

    // 优惠卷请求
    const GetCouponData = async () => {

        const params = {
            page: page,
            busid: business.id,
            active: active,
        };

        const result = await React.Http.post('/coupon/index',params);

        if(result.code == 0)
        {
            //没有更多数据
            SethasMore(false)
            return false
        }else{
            //设置分页和列表合并
            SethasMore(true)
            SetPage(page + 1)
            SetCouponList(CouponList.concat(result.data))
        };
    };

    const OnLoad = async () => {
        await sleep(1000);
        await GetCouponData();
    };

    //选项卡切换
    const TabChange = async (key: string) => 
    {
        SetActive(key);
        await sleep(1000);
        await OnRefresh();
    };

    return(
        <>
            <React.UI.Tabs
                onChange={TabChange}
                activeKey={active}
                activeLineMode={'full'}
            >
                <React.UI.Tabs.Tab title="全部" key="all" />
                <React.UI.Tabs.Tab title="未使用" key="1" />
                <React.UI.Tabs.Tab title="已使用" key="0" />
            </React.UI.Tabs>
            <React.UI.PullToRefresh onRefresh={OnRefresh}>
                {/* 列表结构 */}
                <React.UI.List>
                <div className={styles.coupon_list}>
                    {CouponList.map((item: any) => {
                    return (
                        <div className={styles.coupon_item} key={item.id}>
                        <div className={styles.item_content}>
                            <NavLink to={`/coupon/info?cid=${item.cid}`}>
                            <div className={styles.left}>
                                {parseFloat(item.coupon.rate) * 100}
                                <span>折</span>
                            </div>
                            <div className={styles.right}>
                                <div>{item.coupon.title}</div>
                                <div>开始时间：{item.coupon.createtime_text}</div>
                                <div>结束时间：{item.coupon.endtime_text}</div>
                                <div>领取仅限量 {item.coupon.total} 张，赶快领取！</div>
                            </div>
                            </NavLink>
                        </div>
                        <div className={styles.item_btn}>
                            {item.status == '1' ? (
                            <React.UI.Button color="primary">未使用</React.UI.Button>
                            ) : (
                            <React.UI.Button color="primary" disabled>
                                已使用
                            </React.UI.Button>
                            )}
                        </div>
                        </div>
                    );
                    })}
                </div>
                </React.UI.List>
                {/* 上拉加载 */}
                <React.UI.InfiniteScroll
                loadMore={OnLoad}
                hasMore={hasMore}
                threshold={0}
                />
            </React.UI.PullToRefresh>
            <TabBar />
        </>
    );
};

export default Index;